import Base from "../base.js";
import theatersApi from "../../api/theaters.js";
export default class extends Base {
    constructor(prop) {
        super(prop);
        this.data.cinemasId = prop._id
    }
    data = {
        rows: [],
        _id: "",
        cinemasId: "",
        curPage: 1,//当前页
        eachPage: 3,//每页显示条数
        total: 0,//总条数
        maxPage: 0,//总页数
    }
    render() {
        this.$el.html(`
            <button class="layui-btn layui-btn-normal addTheaters">新增放映厅</button>
            <button class="layui-btn layui-btn-normal layui-bg-green back">
                返回影院列表
            </button>
            <table id="demo" lay-filter="test"></table>
            <div id="test1"></div>
        `)

        layui.use('table', () => {
            this.table = layui.table;

            //第一个实例
            this.table.render({
                elem: '#demo'
                , cols: [[ //表头
                    , {
                        field: '', title: '所属影院', templet: res => {
                            return `
                                ${res.cinemasId.name}
                            `
                        }
                    }
                    , { field: 'name', title: '放映厅', }
                    , {
                        field: '', title: '是否营业', templet: res => {
                            return `
                                ${res.status ? "是" : "否"}
                            `
                        }
                    }
                    , {
                        field: '', title: '操作', templet: function (res) {
                            const { _id } = res;
                            return `
                                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a href="#info/seats/${_id}" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="seats">设置座位</a>
                            `
                        }
                    }
                ]]
            });

        });

        layui.use('laypage', () => {
            this.laypage = layui.laypage;
        });

        this.addTheatersBtn = $(".addTheaters")
        this.banner = $(".banner")
    }
    handle() {
        $(".back").on("click", e => {
            history.go(-1)
        })


        this.table.on('tool(test)', async (obj) => { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.open({
                    content: '是否删除此项'
                    , btn: ['确定', '取消']
                    , yes: async (index, layero) => {
                        //按钮【按钮一】的回调
                        const { _id } = data;
                        await theatersApi.delTheaters({ _id });
                        this.mounted();
                        layer.close(index);
                    }
                });

            } else if (layEvent === 'edit') {
                this.data._id = data._id
                layer.open(
                    {
                        title: "编辑放映厅",
                        type: 1,
                        content: `
                           <div class="add-box" style="padding:20px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">放映厅名称</label>
                                    <div class="layui-input-inline">
                                        <input value="${data.name}" type="text" name="name" required="" lay-verify="required" placeholder="放映厅名称" autocomplete="off" class="layui-input addTheatersIpt">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否营业</label>
                                    <div class="layui-input-inline" style="line-height: 38px;">
                                        ${data.status ? `<input type="radio" name="open" value="true" value="是" checked/>是 <input type="radio" name="open" value="false" value="否"/>否` : `<input type="radio" name="open" value="true" value="是"/>是  <input checked type="radio" name="open" value="false" value="否"/>否`
                            }
                                       
                                    </div>
                                </div>
                           </div>
                        `,
                        btn: ['保存', '取消'],
                        yes: async (index, layero) => {
                            //按钮【按钮一】的回调
                            const data = {
                                name: $(".addTheatersIpt").val(),
                                status: $("input[name=open]:checked").val(),
                                cinemasId: this.data.cinemasId,
                                _id: this.data._id
                            }
                            if (data.name != "" && data.status != "") {
                                await theatersApi.patchTheaters(data)
                                this.mounted();
                                layer.close(index);
                            } else {
                                layer.msg('新增内容不能为空', {
                                    offset: '250px'
                                    , icon: 2
                                    , time: 1500
                                })
                            }
                        },
                        success: () => {
                            layui.use('element', function () {
                                var element = layui.felementorm;

                            });
                        }
                    }
                )
            }
        });

        //新增
        this.addTheatersBtn.on("click", e => {
            layer.open(
                {
                    title: "新增放映厅",
                    type: 1,
                    content: `
                       <div class="add-box" style="padding:20px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">放映厅名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" required="" lay-verify="required" placeholder="放映厅名称" autocomplete="off" class="layui-input addTheatersIpt">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">是否营业</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="open" checked value="true" value="是"/>是
                                    <input type="radio" name="open" value="false" value="否"/>否
                                </div>
                            </div>
                       </div>
                    `,
                    btn: ['新增', '取消'],
                    yes: async (index, layero) => {
                        //按钮【按钮一】的回调
                        const data = {
                            name: $(".addTheatersIpt").val(),
                            status: $("input[name=open]:checked").val(),
                            cinemasId: this.data.cinemasId
                        }
                        if (data.name != "" && data.status != "") {
                            await theatersApi.addTheaters(data)
                            this.mounted();
                            layer.close(index);
                        } else {
                            layer.msg('新增内容不能为空', {
                                offset: '250px'
                                , icon: 2
                                , time: 1500
                            })
                        }
                    }
                }
            )
        })
        this.addBox = $(".add-box")

    }
    mounted() {
        this.getTheatersInfo()
        this.rerender()

    }
    async getTheatersInfo() {
        const { cinemasId, curPage, eachPage } = this.data
        const data = await theatersApi.getTheaters({ cinemasId, curPage, eachPage });
        this.data.rows = data.rows
        this.data.total = data.total

        this.table.reload('demo', {
            data: this.data.rows,
        });
        this.rerender()
    }
    async rerender() {

        this.laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , limit: this.data.eachPage
            , layout: ["count", "prev", "page", "next", "limit"]
            , count: this.data.total //数据总数，从服务端得到
            , limits: [3, 6, 9]
            , curr: this.data.curPage
            , jump: async (obj, first) => {
                //obj包含了当前分页的所有参数，比如：

                //首次不执行
                if (!first) {

                    this.data.curPage = obj.curr
                    this.data.eachPage = obj.limit

                    const { cinemasId, curPage, eachPage } = this.data
                    const data = await theatersApi.getTheaters({ cinemasId, curPage, eachPage });
                    this.data.rows = data.rows
                    this.data.total = data.total

                    this.table.reload('demo', {
                        data: this.data.rows,
                        limit: this.data.eachPage
                    });
                }
            }
        });
    }
}